<template>
  <div class="tabs-box">
    <div class="tabs-menu">
      <!-- <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab">
        <el-tab-pane v-for="item in editableTabs" :key="item.name" closable>
          <template #label>
            <el-icon>
              <Checked />
            </el-icon>
            {{ item.name }}
          </template>
        </el-tab-pane>
      </el-tabs> -->
      <el-tabs v-model="editableTabsValue" type="card" @tab-click="tabClick"  @tab-remove="removeTab">
        <el-tab-pane  v-for="item in editableTabs" :key="item.path"  :label="item.name" :name="item.path" :closable="item.close">
          <!-- {{ item.content }} -->
          <template #label>
            <!-- <el-icon>
              <Checked />
            </el-icon> -->
            <i class="iconfont" :class="[item.icon]"></i>
            {{ item.labol }}
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted,computed} from "vue";
import {Tabs} from "@/stores/tabs.js"
import {mainStore} from "@/stores"
import {useRoute,useRouter} from "vue-router"

let route = useRoute()
let router = useRouter()
// 添加tabs
let mTabs = Tabs()
let mStore = mainStore()

let tabIndex = 2;
const editableTabsValue = ref("2");
const editableTabs = computed(()=>{
  return mTabs.tabList
})

const removeTab = (fullPath) => {
  // console.log(fullPath,"shangchuan")
  mTabs.removeTabsList(fullPath,fullPath==route.fullPath)
};


// 选择按钮selectTabs
const tabClick = (tabItem) => {
  // console.log(tabItem.props,"fefes")
  // console.log(route.fullPath,"这是路由喔")
  if(tabItem.props.name!==route.fullPath){
    router.push({
      path:tabItem.props.name
    })
    // console.log("不一致")
  }
}

// 初始化tabs
const initTabs = ()=>{
 let res=  mStore.routeArr.filter(item=>{
    return item.name =="home"
  })
  mTabs.addTabsList(res[0])
  // console.log(res[0])
}

onMounted(()=>{
  initTabs()
  // console.log(mTabs.tabList,"tabs的内容")
})

</script>


<style lang="scss" scoped>
@import "./index.scss";
</style>

<style lang="scss">
  .active{
    	color: var(--el-color-primary);
			border-bottom: 2px solid var(--el-color-primary);
  }
</style>